import { VueComponent, Prop } from 'vue-typescript'
import {dataService} from '../../service/dataService';
import * as VueRouter from 'vue-router'
var VuePagination = require('v-pagination');
// var vPaging = require('vpaging');

Vue.use(VuePagination);
// Vue.use(vPaging);


var VueTables = require('vue-tables');
Vue.use(VueTables.client,{
    filterable:false,
    compileTemplates:true
});
var router = new VueRouter();

@VueComponent({
    template: require('./inquiryManage.html'),
    // style: require('./home.scss')
})

export class InquiryManageComponent extends Vue {
    el:'#people'
    components:({
        vclienttable:any,
    })
    @Prop
    Records=1;
    // pageLength=[10,20,50]
    showRecords=true;
    PerPage=10;
    skip=0;
    count=10;
    
    seeks=true;
    statusList=[
        {text:"全部",value:""},
        {text:"报价中",value:"2,4,5,6,7"},//
        // {text:"退回下单",value:"3"},
        {text:"已报价",value:"8"},
        {text:"已中标",value:"9"},//
        {text:"未中标",value:"10"},//
        {text:"中标待定",value:"11"},
        {text:"询价终结",value:"12"},//
    ]
   
    inquiryParameter={
         code:"",
        childCode:"",
        status:this.statusList[0].value,
        startTime:"",
        endTime:"",
        sendAddress:"",
        receiveAddress:""
    }
     ready=function(){
         $('p').remove('.VuePagination__count');
         $('#inquiryStartTime').datetimepicker({format:  'YYYY.MM.DD HH:mm'});
        $("#inquiryEndTime").datetimepicker({format:  'YYYY.MM.DD HH:mm'});

         this.$on('vue-pagination::table', function(page) {
            this.table1Page = page;	
            // console.info(page);
            // if(page==1&&this.skip==0){return;}
            this.load(this.inquiryParameter,(page-1)*this.count,this.count);
        });

        //  this.$on('vPageChanged', function(page,PerPage) {
        //     this.table1Page = page;	
        //     // console.info(page);
        //     // if(page==1&&this.skip==0){return;}
        //     this.count=PerPage;
        //     this.load(this.inquiryParameter,(page-1)*this.count,this.count);
        // });


         var $table = $('#table').bootstrapTable({
                
                // url: "index.php",//数据源
                dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
                // height: tableHeight(),
                clickToSelect:true,
                singleSelect:true,
                pagination: true,//是否分页

                pageSize: 10,//单页记录数
                pageList: [10, 20, 30],//分页步进值
                sidePagination: "client",//服务端分页
                buttonsAlign: "left",//按钮对齐方式 子询价编号 发货地址 送货地址 货物名称 货物数量 所需车长 询价时间 紧急程度 询价状态
                columns: [
                    
                    {field: "inquiryId",title: "总询价编号",width: 20,align: "center",valign: "middle"},
                    {field: "inquiryChildId",title: "子询价编号", order: "desc"},
                    {field: "originAddress",title: "发货地址",titleTooltip: "this is name"},
                    {field: "destinationAddress",title: "送货地址",},
                    {field: "goodsName",title: "货物名称",},
                    {field: "quantityOfGoods",title: "货物数量",},
                    {field: "carLength",title: "所需车长",},
                    {field: "creationTime",title: "下单时间",},
                     {field: "statusStr",title: "询价状态",},
                    {field: "responseTime",title: "紧急程度",},
                  
                    // {field: "info",title: "INFO[using-formatter]"},
                    {
                        field: 'template',
                        title: '操作',
                        formatter: function operateFormatter(value, row, index) {
                            // Chris=='待处理' Dan=="已处理"
                            // console.log(row)
                            var aa=` <a title='查看详情' href='#!/inquiry/inquiryCheck/?id=${row.id}&status=${row.status}' class='orderDetail'><i class='glyphicon glyphicon-eye-open'></i></a>`;
                            var bb=`<a href='#!/inquiry/inquiryCheck?id=${row.id}&status=${row.status}' title='编辑' class='editDetail'><i class='glyphicon glyphicon-edit'></i></a>`;
                         
                            // console.log("rowprice",row)

                            switch(row.statusStr){
                                case'报价中':return aa;
                                case'已中标':return aa;
                                case'未中标':return aa;
                                case'询价终结':return aa;
                               default:return bb;
                            }
                            
                        },
                        events: {
                            'click .orderDetail': function (e, value, row, index) {
                                // // alert('You click like action, row: ' + JSON.stringify(row));
                                // dataService().upload().then(function(res){
                                //     console.info('res:',res);
                                // },function(rej){
                                //     console.info('rej:',rej);
                                // });
                            },
                            'click .editDetail':function(e,value,row,index){
                                //  router.go('inquiryAdd/?id=${row.id}&name=detail');
                            },
                            // 'click .remove':function(e,value,row,index){
                            //     console.info('del');
                            // },
                        },
                    }
                ],
                data: [],
                onPageChange:(number, size)=>{
                    // 0,10,20,30
                    // console.info('number',(number-1)*size);
                    // console.info('size',size);
                    this.load(this.inquiryParameter,(number-1)*size,size);

                   
                },
                onClickRow: function(row, $element) {
                    //$element是当前tr的jquery对象
                    // $element.css("background-color", "green");
                },//单击row事件
                actionFormatter:function(value, row, index){
                    // console.info('tyv')
                },
                locale: "zh-CN"//中文支持,
            });
        //表格 初始 加载数据
        this.query(this.skip,this.count);
    }
  

    load=function(inquiryParameter,skip,count){
        // console.log(inquiryParameter)
        dataService().Inquiry.getInquiryList(inquiryParameter.code,inquiryParameter.childCode,inquiryParameter.sendAddress,inquiryParameter.receiveAddress,inquiryParameter.status,inquiryParameter.startTime,inquiryParameter.endTime,skip,count).then(
            (res)=>{
                //  inquiryParameter.code = "5555"
               
                // console.log("res in 询价管理",res.data)
                if(res.length==0){ this.seeks=true; return false}
                var data=res.data;

                //应付报价、退回报价、应收报价、待审核、退回审核
                for(var i=0;i<data.length;i++){
                    if(data[i].status=="3"){
                        data.splice(i,1);
                        i--;
                        continue;
                    }
                    var temp=this.statusList.filter(t=>t.value.indexOf(data[i].status)>-1)[0];
                    data[i].statusStr=temp?temp.text:"";
       
                }

                $('#table').bootstrapTable('load', data);
                this.seeks=true;
                // this.Records=res.total;
                var total=Number(res.total);
                // var x=10;
                this.Records=total==0?0.5:total;

                this.showRecords=total==0?false:true;


            },function(rej){
               console.info('rej:',rej);
                this.seeks=true;
            }
        );
    }
    query=function(skip,count){
        // this.skip=skip;
       this.seeks=false;
        // this.load(this.inquiryParameter,skip,count);

        this.$refs.table.setPage(1);
        


        // dataService().CustomerRepresentative.getCustomerList("",0,10)
    }
    
   
   
    @Prop
    tableData=[];
   
    // deleteMe=function(id){
    //     //调后台接口(删除)
    //     console.info('test');
        
    // }
    package:string = 'vue-typescript';
    repo:string = 'https://github.com/itsFrank/vue-typescript';
    // result1:string= null;
    // formatDatetime = function(datetime) {
    // if (datetime === null) {
    //     return "[null]";
    // } else {
    //     return datetime.format("YYYY-MM-DD HH:mm:ss");
    // }
    // }

}
